<template>
  <div style="width: 260px;padding:6px;margin:10px 0px 10px 10px;background:#fff;">
        <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
        <a-tree
          :expandedKeys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :tree-data="gData"
          @expand="onExpand" @select="treeSelect"
        >
          <template #title="{ title }">
            <span v-if="title.indexOf(searchValue) > -1">
              {{ title.substr(0, title.indexOf(searchValue)) }}
              <span style="color: #f50">{{ searchValue }}</span>
              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
            </span>
            <span v-else>{{ title }}</span>
          </template>
        </a-tree>
      </div>
</template>

<script lang="ts" setup>
import {ref, computed, unref,watch, onMounted} from 'vue';
import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';

import {treeData} from '@/views/dormitory/dormbuild/DormBuild.api'
// Emits声明
const emit = defineEmits(['treeSelectEmit']);
const expandedKeys = ref<string[]>([]);
const searchValue = ref<string>('');
const autoExpandParent = ref<boolean>(true);
const genData: TreeDataItem[] = [];
const gData = ref<TreeDataItem[]>(genData);
const onExpand = (keys: string[]) => {
expandedKeys.value = keys;
autoExpandParent.value = false;
};
const x = 3;
const y = 2;
const z = 1;
const generateData = (_level: number, _preKey?: string, _tns?: TreeDataItem[]) => {
const preKey = _preKey || '0';
const tns = _tns || genData;
const children = [];
for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key });
    if (i < y) {
    children.push(key);
    }
}
if (_level < 0) {
    return tns;
}
const level = _level - 1;
children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
});
  };
  generateData(z);

  onMounted(async () => {
    console.log("testttttt");
    const result = await treeData({});
    // console.log(result);
    const arr =[];
    expandedKeys.value = []
    result.forEach(item=>{
       expandedKeys.value.push(item.code)
        if(item.children){
          item.children.forEach(item2=>{
            item2.title = item2.name
            item2.key = item2.code
          })
        }
        arr.push({title:item.name,key:item.code,children:item.children})
    })
    console.log(arr);
    // console.log(genData)
    //gData.value = [...gData.value];
    gData.value = arr;
  })


const onLoadData = (treeNode: any) => {
  return new Promise((resolve: (value?: unknown) => void) => {
    if (treeNode.dataRef.children) {
      resolve();
      return;
    }
    setTimeout(() => {
      treeNode.dataRef.children = [
        { title: 'Child Node', key: `${treeNode.eventKey}-0` },
        { title: 'Child Node', key: `${treeNode.eventKey}-1` },
      ];
      gData.value = [...gData.value];
      resolve();
    }, 1000);
  });
};





  const dataList: TreeDataItem[] = [];
  const generateList = (data: TreeDataItem[]) => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const key = node.key;
      dataList.push({ key, title: key as string });
      if (node.children) {
        generateList(node.children);
      }
    }
  };
  generateList(genData);

  const getParentKey = (key: string, tree: TreeDataItem[]): string | number | undefined => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some(item => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };

  function treeSelect(value){
    emit('treeSelectEmit',value);
  }
  watch(searchValue, value => {
      const expanded = dataList
        .map((item: TreeDataItem) => {
          if ((item.title as string).indexOf(value) > -1) {
            return getParentKey(item.key as string, gData.value);
          }
          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      expandedKeys.value = expanded as string[];
      searchValue.value = value;
      autoExpandParent.value = true;
  });
 
    
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>
